<template>
  <div class="taxi-content">
    <div class="taxi-head">
      <router-link to="/home/taxi" class="taxi-left">
          <i class="iconfont icon-fanhui" style="display: block;width: 38px;height: 38px;">
          </i>
      </router-link>
      <h3>我的行程</h3>
    </div>
    <div class="taxi-null"> .</div>
    <ul>
      <li class="item border-bottom" v-for="item in travelList">
        <h5 v-if="item.status" class="item-img">已支付</h5>
        <h5 v-else="item.status" class="item-img2">未支付</h5>
        <div class="item-info">
          <h5 class="item-title">起点：{{item.start_place}}</h5>
          <h5 class="item-title">终点：{{item.end_place}}</h5>
          <h5 class="item-title">里程：{{item.mile}}公里</h5>
          <p class="item-desc">订单号：{{item.num}}</p>
          <p class="item-desc">订单完成时间：{{item.end_time}}</p>
          <p class="item-desc">{{item.driver.nickname}}</p>
          <h5 class="item-title">已评价</h5>
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
  import Icon from 'vue-awesome/components/Icon'
  import tip from '@/components/tip'
  import computePrice from '@/components/computePrice'
  import {mapActions, mapState, mapGetters} from 'vuex'
  import {Indicator,Toast} from 'mint-ui'

  export default {

    data() {
      return {
        name: ''
      }
    },
    created() {
        this.$get('api/gettravel',{},'请求错误').then(
          res => {
            Indicator.open('加载中...')
            setTimeout(()=>{
              if (res.code == 1) {
                console.log(res.data)
                this.$store.state.travelList = res.data
                // this.$store.state.travelList = res.data[orders]
              }
              Indicator.close()
            },1000)
          }
        )
    },
    computed: {
      ...mapState([
        'position',
        'address',
        'travelList'
      ])
    },
    watch: {
      position(oldVal, newVal) {
      }
    },
    methods: {
      show_suggest(key) {
        this.$store.dispatch('show_suggest', key)
        this.$router.push({path: '/suggest'})
      }
    },
    components: {
      Icon,
      tip,
      computePrice
    }
  }
</script>
<style scoped>
  .fa-icon {
    vertical-align: middle;
  }

  .taxi-head {
    position: fixed;
    top: 0px;
    width: 100%;
    line-height: 15vw;
    background: #f3ecf9;
    color: #2b2b2b;
    text-align: center;
  }

  .taxi-left {
    width: 38px;
    height: 38px;
    display: block;
    float: left;
    color: #00A5ED
  }

  .taxi-null {
    width: 100%;
    line-height: 15vw;
  }

  .taxi-content {
    border-radius: 2px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
    color: #999;
    background-color: #fff;
    text-align: left;
  }

  .item {
    display: flex;
    height: 150px;
    border-bottom: #dfd8e5 solid 1px;
  }

  .item .item-img {
    line-height: 110px;
    color: #64bc52;
    width: 50px;
    height: 110px;
    padding: 20px;
  }
  .item .item-img2 {
    line-height: 110px;
    color: #bc1e1b;
    width: 50px;
    height: 110px;
    padding: 20px;
  }

  .item-info .item-title {
    padding-top: 4px;
  }

  .item-info .item-desc {
    padding-top: 2px;
    font-size: 13px;
  }

</style>

